<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="full-screen" content="yes">
    <meta content="default" name="apple-mobile-web-app-status-bar-style">
    <meta name="screen-orientation" content="portrait">
    <meta name="browsermode" content="application">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <base target="_blank">
    <title>棉花妈妈的专属GPT-智能聊天</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="css/chat.css">
</head>

<body>
<img style="width:100%;height:100%" src="img/chat_bg.jpg">

<div class="abs cover contaniner" id="app">
    <div class="abs cover pnl">
        <div class="top pnl-head" style="padding: 20px ; color: white;">
            <div id="userName">
                用户：{{username}}
            </div>
        </div>
        <!--聊天区开始-->
        <div class="abs cover pnl-body" id="pnlBody">
            <div class="abs cover pnl-left" id="initBackground" style="background-color: white; width: 100%">
                <div class="abs cover pnl-left" id="chatArea" v-show="true">

                    <div class="abs cover pnl-msgs scroll" id="show">
                        <div class="pnl-list" id="hists"><!-- 历史消息 --></div>
                        <div class="pnl-list" id="msgs" v-for="message in historyMessage">

                            <!-- 消息这展示区域 -->
                            <div class="msg guest" v-if="message.toName">
                                <div class="msg-right">
                                    <div class="msg-host headDefault"></div>
                                    <div class="msg-ball">{{message.message}}</div>
                                </div>
                            </div>

                            <div class="msg robot" v-else>
                                <div class="msg-left" worker="">
                                    <div class="msg-host photo"
                                         style="background-image: url(img/avatar/Member002.jpg)"></div>
                                    <div class="msg-ball">{{message.message}}</div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="abs bottom pnl-text">

                        <div class="abs cover pnl-input">
                            <textarea class="scroll" id="context_text" @keyup.enter="submit" wrap="hard"
                                      placeholder="在此输入文字信息..."
                                      v-model="sendMessage.message"></textarea>
                            <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                                <ul class="atcom" id="atcom"></ul>
                            </div>
                        </div>

                        <div class="abs br pnl-btn" id="submit" @click="submit"
                             style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);">
                            发送
                        </div>

                        <div class="pnl-support"
                             id="copyright"><a href="https://gitee.com/flowers-bloom-is-the-sea/lover-gpt">项目地址</a>
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    let ws;
    let path = "http://localhost:8081/xinqidev/";
    new Vue({
        el: "#app",
        data() {
            return {
                isOnline: true,
                username: "",
                toName: "XinqiGPT",
                sendMessage: {
                    toName: "",
                    message: ""
                },
                historyMessage: [//historyMessage
                    /*{toName: "李四", message: "你好,张三"},
                    {toName: "李四", message: "在吗"},
                    {toName: "李四", message: "怎么不说话"},
                    {fromName: "张三", message: "你好,李四"}*/
                ],
            }
        },
        created() {
            this.init();
        },
        methods: {
            async init() {
                await axios.get(path + "user/getUsername").then(res => {
                    this.username = res.data;
                });

                //创建webSocket对象
                ws = new WebSocket("ws://" + "localhost:8081/xinqidev/" + "chat");//todo 这里是需要改的地方

                //给ws绑定事件
                ws.onopen = this.onOpen;
                //接收到服务端推送的消息后触发
                ws.onmessage = this.onMessage;

                ws.onclose = this.onClose;
            },

            submit() {
                this.sendMessage.toName = this.toName;
                console.log("this.toName is " + this.toName)
                console.log("this.sendMessage is " + this.sendMessage)

                console.dir(this.sendMessage)
                this.historyMessage.push(JSON.parse(JSON.stringify(this.sendMessage)));
                sessionStorage.setItem(this.toName, JSON.stringify(this.historyMessage));

                ws.send(JSON.stringify(this.sendMessage));
                this.sendMessage.message = "";
            },
            onOpen() {
                this.isOnline = true;
            },
            onClose() {
                this.isOnline = false;
            },
            onMessage(evt) {//localhost:8081/login.html
                //获取服务端推送过来的消息
                var dataStr = evt.data;
                //将dataStr 转换为json对象
                var res = JSON.parse(dataStr);

                console.log("res is " + res)
                console.dir(res)

                var history = sessionStorage.getItem(res.fromName);
                if (!history) {
                    this.historyMessage = [res];
                } else {
                    this.historyMessage.push(res);
                }
                console.log("this is " + this.historyMessage)
                console.dir(this.historyMessage)

                sessionStorage.setItem(res.fromName, JSON.stringify(this.historyMessage));
            },
            // window.onbeforeunload=function(event){
            //     var  e = window.event || event;
            //     e.returnValue = '确定关闭么？'
            // }
        }
    });


</script>
</body>
</html>